<template>
    <div style="width: 100%; height: 300px;">
        <div style="width: 100%; height: 290px;margin-left: 10px;" ref="mychart"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        dataList: [],
        axData: []
    },

    data() {
        return {
            serData: this.dataList,
            axisData: this.axData,
            option: {
                tooltip: {
                    trigger: 'item',
                    formatter: function (e) {
                        // params 是一个数组，包含了触发提示框的所有数据项信息
                        var result = e.value + '<br>'; // 假设第一个数据项包含了名称信
                        return result;
                    }
                },

                title: {
                    text: '景区实时人流量',
                    left: 'center',
                    top: '20px',
                    textStyle: {
                        color: '#fff',  // 设置标题文字颜色为蓝色
                        fontSize: 14,    // 设置标题文字大小为18px
                        fontWeight: 'bold'  // 设置标题文字加粗
                    }
                },
                xAxis: {
                    data: ["13:00", "13:03", "13:06", "13:09", "13:12", "13:15"],
                    axisLine: {
                        lineStyle: {
                            color: '#fff'  // 设置坐标轴线的颜色为红色
                        }
                    },
                    axisLabel: {
                        interval: 0, // 设置为0表示所有标签都显示
                    },
                },
                yAxis: {
                    type: 'value',
                    name: '游客量',
                    axisLine: {
                        lineStyle: {
                            color: '#fff'  // 设置坐标轴线的颜色为红色
                        }
                    }
                },
                series: [
                    {
                        data: [566, 674, 564, 565, 334, 553],
                        type: 'line',
                       
                        markLine: {
                    symbol: 'none', // 不显示标记图形
                    lineStyle: {
                        color: 'red', // 预警线颜色
                        type: 'solid', // 线型
                    },
                    label: {
                        show: true,
                        position: 'end',
                        formatter: '',
                    },
                    data: [
                        { yAxis: 190 } // 设置红色预警线的阈值
                    ],
                },
                    }
                ],
              
            }
        }
    },
    beforeDestroy() {

    },
    mounted() {

        this.init()

    },
    watch: {
        //监听有没有新的数据更新

    },
    methods: {
        init() {
            var mychart = echarts.init(this.$refs.mychart)
            console.log(this.axisData)
            console.log(this.serData)
            this.option.xAxis.data = this.axisData
            this.option.series[0].data = this.serData
            mychart.setOption(this.option)
        }
    }
}
</script>

<style></style>